<template>
	<el-form v-if="selectedEl.obj" label-position="top">
		<el-form-item label="标题">
			<el-input v-model="selectedEl.obj.elementName" />
		</el-form-item>

		<el-form-item label="默认值">
			<el-input v-model="selectedElVal" type="textarea" :disabled="!showItemEl('默认值')" />
		</el-form-item>

		<el-form-item v-if="showItemEl('placeholder')" label="placeholder">
			<el-input v-model="selectedEl.obj.placeholder" />
		</el-form-item>

		<el-form-item label="排版">
			<el-radio v-model="selectedEl.obj.elementWidth" label="100%">单列</el-radio>
			<el-radio v-model="selectedEl.obj.elementWidth" label="50%">双列</el-radio>
		</el-form-item>

		<el-form-item v-if="selectedEl.ele === 'textarea'" label="行数">
			<el-input-number v-model="selectedEl.obj.rows" :min="1" :max="10" :step="1" />
		</el-form-item>

		<el-form-item v-if="selectedEl.ele == 'radio'" label="单选框配置">
			<div v-for="(item, i) in selectedEl.obj.detailList" :key="i">
				<el-radio v-model="selectedEl.obj.value" style="margin-bottom: 5px" :label="item.value">
					<el-input v-model="item.value" />
				</el-radio>
				<i class="el-icon-remove-outline removeIcon" style="margin-left: 10px" @click="removeItem('radio', i)" />
			</div>
			<el-button type="primary" size="mini" round @click="addItem('radio', selectedEl.obj.detailList.length)">添加</el-button>
		</el-form-item>

		<el-form-item v-if="selectedEl.ele == 'checkBox'" label="多选框配置">
			<el-checkbox-group v-model="selectedEl.obj.value">
				<div v-for="(item, i) in selectedEl.obj.detailList" :key="i">
					<el-checkbox style="margin-bottom: 5px" :label="item.value">
						<el-input v-model="item.value" />
					</el-checkbox>
					<i class="el-icon-remove-outline removeIcon" style="margin-left: 10px" @click="removeItem('checkBox', i)" />
				</div>
			</el-checkbox-group>

			<el-button type="primary" size="mini" round @click="addItem('radio', selectedEl.obj.detailList.length)">添加</el-button>
		</el-form-item>

		<el-form-item v-if="selectedEl.ele == 'select'" label="单选配置">
			<div v-for="(item, i) in selectedEl.obj.detailList" :key="i">
				<el-radio v-model="selectedEl.obj.value" style="margin-bottom: 5px" :label="item.value">
					<el-input v-model="item.value" />
				</el-radio>
				<i class="el-icon-remove-outline removeIcon" style="margin-left: 10px" @click="removeItem('radio', i)" />
			</div>
			<el-button type="primary" size="mini" round @click="addItem('radio', selectedEl.obj.detailList.length)">添加</el-button>
		</el-form-item>

		<el-form-item v-if="selectedEl.ele == 'selectBox'" label="多选配置">
			<el-checkbox-group v-model="selectedEl.obj.value">
				<div v-for="(item, i) in selectedEl.obj.detailList" :key="i">
					<el-checkbox style="margin-bottom: 5px" :label="item.value">
						<el-input v-model="item.value" />
					</el-checkbox>
					<i class="el-icon-remove-outline removeIcon" style="margin-left: 10px" @click="removeItem('checkBox', i)" />
				</div>
			</el-checkbox-group>

			<el-button type="primary" size="mini" round @click="addItem('radio', selectedEl.obj.detailList.length)">添加</el-button>
		</el-form-item>

		<el-form-item v-if="selectedEl.ele == 'datePicker'" label="时间格式">
			<el-select v-model="selectedEl.obj.dateType" placeholder="请选择" @change="dateChange">
				<el-option v-for="(item, index) in time_type" :key="index" :label="item.format" :value="item.type" />
			</el-select>
		</el-form-item>

		<!-- <el-form-item label="是否必填">
      <el-radio-group v-model="selectedEl.obj.required">
        <el-radio :label="true">是</el-radio>
        <el-radio :label="false">否</el-radio>
      </el-radio-group>
    </el-form-item> -->

		<el-form-item label="校验规则">
			<el-select v-model="selectedEl.obj.rules" multiple placeholder="请选择">
				<el-option v-for="(item, index) in rules" :key="index" :label="item.message" :value="JSON.stringify(item)" />
			</el-select>
		</el-form-item>

		<el-form-item label="启用状态">
			<el-radio-group v-model="selectedEl.obj.status">
				<el-radio :label="true">启用</el-radio>
				<el-radio :label="false">停用</el-radio>
			</el-radio-group>
		</el-form-item>
	</el-form>
</template>

<script>
import format from "date-fns/format";

export default {
	// eslint-disable-next-line
	props: ["selectedEl"],
	data() {
		return {
			from_rules: [
				{ required: true, message: "必须的", trigger: "blur" },
				{ min: 3, max: 5, message: "3到5个字符", trigger: "blur", elType: ["input"] },
				{ type: "date", message: "日期类型", trigger: "change" },
				{ type: "url", message: "url类型", trigger: "change" },
				{ type: "email", message: "电子邮件", trigger: "change" },
				{ type: "hex", message: "十六进制", trigger: "change" },
				{ type: "enum", enum: ["aaa", "bbb"], message: "存在于枚举中", trigger: "blur" },
				{ type: "integer", message: "必须是数字类型和一个整数", trigger: "blur" },
				// { type: "string", message: "必须是字符串类型", trigger: "blur" },
				// { type: "number", message: "必须是数字类型", trigger: "blur" },
				// { type: "boolean", message: "必须是布尔类型", trigger: "change" },
				// { type: "method", message: "必须是方法类型", trigger: "blur" },
				// { type: "regexp", message: "必须是regexp类型", trigger: "blur" },
				// { type: "float", message: "必须是数字类型和浮点数", trigger: "blur" },
				// { type: "any", message: "可以是任何类型", trigger: "blur" },
				// { type: "object", message: "必须是对象类型", trigger: "blur" },
				// {type: "array",message: "必须是一个数组",trigger: "blur"},
			],
			time_type: [
				{ format: "yyyy-MM-dd HH:mm:ss", type: "datetime" },
				{ format: "yyyy-MM-dd", type: "date" },
			],
		};
	},
	computed: {
		// 是否显示某字段配置
		showItemEl() {
			return function (type) {
				switch (type) {
					case "placeholder":
						return (
							this.selectedEl.ele === "input" ||
							this.selectedEl.ele === "datePicker" ||
							this.selectedEl.ele === "select" ||
							this.selectedEl.ele === "selectBox" ||
							this.selectedEl.ele === "textarea"
						);
					case "默认值":
						return (
							this.selectedEl.ele !== "radio" &&
							this.selectedEl.ele !== "checkBox" &&
							this.selectedEl.ele !== "select" &&
							this.selectedEl.ele !== "selectBox" &&
							this.selectedEl.ele !== "datePicker" &&
							this.selectedEl.ele !== "image"
						);
				}
			};
		},
		// 元素绑定值
		selectedElVal: {
			get: function () {
				const val = this.selectedEl.obj.value;
				if (typeof val === "object" || typeof val === "boolean") {
					return JSON.stringify(val);
				} else {
					return val;
				}
			},
			set: function (newValue) {
				this.selectedEl.obj.value = newValue;
			},
		},
		// 过滤元素绑定的校验规则
		rules() {
			return this.from_rules.filter(v => {
				if (v.elType) {
					return v.elType.includes(this.selectedEl.obj.elementType);
				} else {
					return true;
				}
			});
		},
	},
	methods: {
		removeItem(type, index) {
			const [delItem] = this.selectedEl.obj.detailList.splice(index, 1);
			if (!this.selectedEl.obj.value) return;
			if (typeof this.selectedEl.obj.value === "object") {
				for (let i = 0, len = this.selectedEl.obj.value.length; i < len; i++) {
					if (this.selectedEl.obj.value[i] === delItem.value) {
						this.selectedEl.obj.value.splice(i, 1);
						break;
					}
				}
			} else {
				this.selectedEl.obj.value === delItem.value && (this.selectedEl.obj.value = "");
			}
		},
		addItem() {
			this.selectedEl.obj.key += 1;
			this.selectedEl.obj.detailList.push({
				key: this.selectedEl.obj.key,
				value: "选项框" + this.selectedEl.obj.key,
				label: "选项框" + this.selectedEl.obj.key,
			});
		},
		dateChange(e) {
			this.selectedEl.obj.value =
				e === "datetime"
					? format(new Date(this.selectedEl.obj.value), "yyyy-MM-dd HH:mm:ss")
					: format(new Date(this.selectedEl.obj.value), "yyyy-MM-dd");
		},
	},
};
</script>

<style lang="scss" scoped></style>
